<!DOCTYPE html>
<html>
<%include html-head%>
<body>
	<div data-role="page" id="editTaskForPlan">
		<div data-role="header" data-theme="a">
			<h1><%=title%></h1>
		</div>

		<div role="main" class="ui-content" id=<%planId%> >
			<div class="ui-grid-a">
				<div class="ui-block-b" style="margin-left: 400px">
					<div class="ui-bar ui-bar-a">
						<div data-role="controlgroup" data-type="horizontal"
							style="float: left;">
							<h3>Selected Tasks:</h3>
						</div>
						<div data-role="controlgroup" data-type="horizontal"
							data-mini="true" style="float: right;">
							<a href="#" data-role="button" id="selectedSelectAll">SelectAll</a>
							<a href="#" data-role="button" id="selectedDeselectAll">DeselectAll</a>
							<a href="#" id="selectedDelete"
								class="ui-btn ui-corner-all ui-icon-minus ui-btn-icon-notext">Icon
								only</a>
						</div>
					</div>
					<ul data-role="listview" data-inset="true" data-filter="true"
						id="selectedListView" >
						<%if(tasksBelongPlan !== null){%>
						<%tasksBelongPlan.forEach(function(task){%>
						<%if(task !== null) {%>
						<li id="<%= task%>">
						<label> <input name="checkbox-0" type="checkbox"><%= task%></label>
						</li>
						<%}%>
						<%})%>
						<%}%>
					</ul>
					<br />
					<div class="ui-bar ui-bar-a ui-corner-">
						<div data-role="controlgroup" data-type="horizontal"
							style="float: left;">
							<h3>Remain Tasks:</h3>
						</div>
						<div data-role="controlgroup" data-type="horizontal"
							data-mini="true" style="float: right;">
							<a href="#" data-role="button" id="remainSelectAll">SelectAll</a> <a
								href="#" data-role="button" id="remainDeselectAll">DeselectAll</a>
							<a href="#" id="selectedAdd"
								class="ui-btn ui-corner-all ui-icon-plus ui-btn-icon-notext">Icon
								only</a> 
						</div>
					</div>
					<ul data-role="listview" data-inset="true" data-filter="true"
						id="remainListView">
						<%tasksUnbelongPlan.forEach(function(task){%>
						<li id="<%= task%>">
						<label><input name="checkbox-0" type="checkbox"><%=task%></label>
						</li>
						<%})%>
					</ul>
					<a href="#" data-role="button" data-rel="back" data-theme="a">Back plan manager page</a>
				</div>
			</div>
		</div>
	<script type="text/javascript" src="owjs/wEditTaskForPlan.js"></script>
	</div>
</body>
</html>